<template>
  <div class="procurement_box">
    <btnGroup title="物流总概" @change="selectChange" />
    <div v-if="viewData" class="procurement_data-item">
      <el-row>
        <el-col :span="5">
          <p class="row-title-lable">运输单数量</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="viewData.statisticsDriver.logisticsNumber" :duration="3000" class="card-panel-num" />
            <span class="data_unit">个</span>
          </p>
        </el-col>
        <el-col :span="5">
          <p class="row-title-lable">运输单金额</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="viewData.statisticsDriver.logisticsMoney" :duration="3000" :decimals="2" class="card-panel-num orange" />
            <span class="data_unit">元</span>
          </p>
        </el-col>
        <el-col :span="5">
          <p class="row-title-lable">物流支出金额</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="viewData.statisticsDriver.expensesMoney" :duration="3000" :decimals="2" class="card-panel-num orange" />
            <span class="data_unit">元</span>
          </p>
        </el-col>
        <el-col :span="5">
          <p class="row-title-lable">货物总量</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="viewData.statisticsDriver.logisticsTotalWeight" :duration="3000" :decimals="3" class="card-panel-num" />
            <span class="data_unit">吨</span>
          </p>
        </el-col>
        <el-col :span="4">
          <p class="row-title-lable">驾驶员数量</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="viewData.hardwareData.driverNumber" :duration="3000" class="card-panel-num" />
            <span class="data_unit">人</span>
          </p>
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="5">
          <p class="row-title-lable">自营车辆</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="viewData.hardwareData.carNumber" :duration="3000" class="card-panel-num" />
            <span class="data_unit">辆</span>
          </p>
        </el-col>
        <el-col :span="5">
          <p class="row-title-lable">外调车辆</p>
          <p class="row-data">
            <count-to :start-val="0" :end-val="viewData.hardwareData.otherCarNumber || 0" :duration="3200" class="card-panel-num" />
            <span class="data_unit">辆</span>
          </p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import btnGroup from '@/components/TopBtnGroup'
import CountTo from 'vue-count-to'
import { logisticsData } from '@/api/data'
export default {
  name: 'Overview',
  components: { btnGroup, CountTo },
  data() {
    return {
      viewData: null
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.init(-1)
    })
  },
  methods: {
    async init(type) {
      var result = await logisticsData({ findType: type })
      if (result.code === 200) this.viewData = result.data
    },
    selectChange(val) {
      console.log(val)
      switch (val) {
        case 'all':
          this.init(-1)
          break
        case 'day':
          this.init(0)
          break
        case 'week':
          this.init(1)
          break
        case 'month':
          this.init(2)
          break
        case 'quarter':
          this.init(3)
          break
        case 'years':
          this.init(4)
          break
        default:
          break
      }
    }
  }
}
</script>

<style scoped>
.procurement_box{
  padding: 20px;
}
.procurement_data-item{margin-top: 10px;}
.row-title-lable,.data_unit{
  font-size: 14px;
  color: #333;
}
.row-data{
    color: #1890ff;
    font-size: 20px;
    font-weight: bold;
}
.card-panel-num{
  font-size: 28px;
}

</style>
